<script src="./script.js"></script>
<style src="./style.scss" lang="scss" scoped></style>
<template>
  <div>
    <web-header></web-header>

    <div class="wrap w" v-if="order">
      <div class="bread pl10">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>订单支付</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="pl10">
        <div class="fitem">
          <label class="label">订单编号：</label>
          <div class="">
            {{ order.id }}
          </div>
          <label class="label" style="margin-left:10px;">下单时间：</label>
          <div class="">
            {{ order.created_at | parseTime('{y}年{m}月{d}日 {h}:{i}:{s}') }}
          </div>
          <label class="label" style="margin-left:10px;">订单状态：</label>
          <div class="">
            <el-tag type="danger">待支付</el-tag>
          </div>
        </div>
      </div>

      <div class="pl10">
        <div class="fitem">
          <label class="label">报价类别：</label>
          <div class="">
            {{ order.quote.name }}
          </div>
        </div>
      </div>

      <div class="pl10">
        <div class="fitem">
          <label class="label">报价明细：</label>
          <div class="">
            {{ order.detail.info }}
          </div>
        </div>
      </div>

      <div class="pl10">
        <div class="fitem">
          <label class="label">制作数量：</label>
          <div class="">
            {{ order.quantity }}
          </div>
        </div>
      </div>

      <div class="pl10">
        <div class="fitem">
          <label class="label">文件列表：</label>
          <div class="">
            <el-link v-for="item in order.files">{{ item.name }}</el-link>
          </div>
        </div>
      </div>

      <div class="pl10">
        <div class="fitem">
          <label class="label">订单金额：</label>
          <div class="">
            ￥{{ order.amount }}
          </div>
        </div>
      </div>

      <div class="pl10">
        <div class="fitem">
          <label class="label">支付方式：</label>
          <div class="">
            <el-radio-group v-model="payType">
              <el-radio-button label="BALANCE">余额支付（￥{{ user.balance }}）</el-radio-button>
              <el-radio-button label="WXPAY">微信支付</el-radio-button>
            </el-radio-group>
          </div>
          <div style="margin-left:10px;">
            <el-link type="primary">充值优惠活动中，点击快速充值</el-link>
          </div>
          <div style="margin-left:10px;">
            <el-link>请扫码关注公众号，实时推送订单动态</el-link>
          </div>
          <div style="margin-left:10px;">
            <img src="https://cdn.qianqianying.com/yundingfeng_code.png" style="width: 80px;height: 80px;" />
          </div>
          <div style="margin-left:10px;">
            <el-link>审稿结果 | 派送信息 | 活动信息</el-link>
          </div>
        </div>
      </div>

      <div class="pl10">
        <div class="fitem">
          <el-button type="success" @click="pay">确认支付</el-button>
          <div style="margin-left: 10px;">1小时内未支付系统自动取消，24小时自助下单，以支付到账时间为准，每天18:00前下单当天制作</div>
        </div>
      </div>

    </div>

    <web-footer></web-footer>
  </div>
</template>
